<template>
    <div class="big">
        <!-- <h1>我的关注页</h1> -->
        <div class="box">
            <van-nav-bar left-text="返回" left-arrow @click-left="$router.back()" />
        </div>
        <div class="content">
            <h1>我的关注</h1>
            <div class="title">
                <span><van-icon name="clock-o" /> 时间</span>
                <span>13:00-17:30 开放</span>
            </div>
            <div class="title">
                <span><van-icon name="location-o" /> 位置</span>
                <span @click="$router.push('/map')">美食区 11F > </span>
            </div>
            <div class="aside">
                <h3>景点介绍</h3>
                <p>
                    和园，中国清朝时期皇家园林，前身为清漪园，坐落在北京西郊，距城区15公里，全园占地3.009平方公里（其中颐和园世界文化遗产区面积为2.97平方公里），水面约占四分之三。 [29]
                    与圆明园毗邻。它是以昆明湖、万寿山为基址，以杭州西湖为蓝本，汲取江南园林的设计手法而建成的一座大型山水园林，也是保存最完整的一座皇家行宫御苑，被誉为“皇家园林博物馆”。
                </p>
                <br>
                <p>
                    清朝乾隆皇帝继位以前，在北京西郊一带，建起了四座大型皇家园林。乾隆十五年（1750年），乾隆皇帝为孝敬其母崇庆皇太后动用448万两白银把这里改建为清漪园，形成了从现清华园到香山长达二十公里的皇家园林区。咸丰十年（1860年），清漪园被英法联军焚毁。光绪十四年（1888年）重建，改称颐和园，作消夏游乐地。光绪二十六年（1900年），颐和园又遭“八国联军”的破坏，珍宝被劫掠一空。清朝灭亡后，颐和园在军阀混战和国民党统治时期，又遭破坏。
                </p>
                <br>

                <br>
                <p>
                    1961年3月4日，颐和园被公布为第一批全国重点文物保护单位，与同时公布的承德避暑山庄、拙政园、留园并称为中国四大名园，1998年11月被列入《世界遗产名录》。2007年5月8日，颐和园经国家旅游局正式批准为国家5A级旅游景区。
                    2009年，颐和园入选中国世界纪录协会中国现存最大的皇家园林。
                </p>
            </div>
        </div>
        <div class="btnBox">
            <van-button round type="warning" size="large" @click="care"> ❤️ 点击购票</van-button>
        </div>
    </div>
</template>
  
<script setup>
import { showSuccessToast, showFailToast } from 'vant';


let care = () => {
    showSuccessToast('购票成功');
    console.log(111);
}
</script>
  
<style lang="scss" scoped>
.big {
    display: flex;
    height: 100%;
    flex-direction: column;
    overflow: auto;

    .box {
        width: 375px;
        height: 281px;
        background: url('https://img0.baidu.com/it/u=2549228543,4242965322&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=427') 100%/cover;

        .van-nav-bar {
            background: transparent;
            color: white;
        }
    }

    .content {
        flex: 1;
        overflow: auto;
        padding: 0 10px;

        //   border-top-right-radius:25px;
        //   border-top-left-radius: 25px;
        // border: 1px solid black;
        h1 {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }

        .title {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        h3 {
            height: 40px;
            line-height: 40px;
        }

        p {
            text-indent: 24px;
        }
    }

    .btnBox {
        height: 50px;
        width: 375px;
        padding: 5px 10px;

        .van-button {
            width: 90%;
        }
    }
}
</style>